<style type="text/css">
    .dialog { font-size: 62.5%; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    .ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none; cursor:pointer; position: relative; text-align: center; }
    .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
    .red { border: 1px solid red }
    .ui-datepicker{ font-size: 62.5%;z-index: 1003; }
    .action-button { height:21px;width:20px; }
</style>

<script type="text/javascript">
    function isAlNum(value){
        return /^[a-z0-9]+$/i.test(value);
    }

    function isDate(value){
        return /(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])/i.test(value);
    }

    function isEmail(value){
        return /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i.test(value);
    }

    function checkName(value) {
        if(!isAlNum(value) || value.length < 3 || value.length > 10){
            return [false,"Please enter a valid name (only numbers and letters and between 2 - 10 chars)!",""];
        }else{
            return [true,"",""];
        }
    }

    function checkDate(value) {
        if(!isDate(value)){
            return [false,"Please enter a valid date!",""];
        }else{
            return [true,"",""];
        }
    }

    function checkGender(value) {
        if(value.toLowerCase() != "m" && value.toLowerCase() != "f"){
            return [false,"Please enter a valid gender!",""];
        }else{
            return [true,"",""];
        }
    }

    function checkEmail(value) {
        if(!isEmail(value)){
            return [false,"Please enter valid email!",""];
        }else{
            return [true,"",""];
        }
    }

    function checkGroupId(value) {
        if(value < 1 || value > 4){
            return [false,"Please enter a valid group id (between 1-4)!",""];
        }else{
            return [true,"",""];
        }
    }



    function addUser(){
        $("#addUserForm").dialog('open');
    }

    function setPassword() {
        var row_id = $("#usersTable").getGridParam("selrow");
        if(!row_id)
        {
            $("#dialog").data('title.dialog', "No row selected" );
            $("#dialog p").text("Please select a user whose password you want to change.");
            $("#dialog").dialog('open');
        }
        $("#changePassword").dialog('option', 'buttons', {
            'OK': function() {
                var  password = $("#changePassword #password").attr('value'),
                password2 = $("#changePassword #password2").attr('value'),
                bValid = true;

                bValid = bValid && password == password2;
                if (bValid) {
                    $.post("/user/set-user-password",{row_id:row_id , password:password},
                    function(data) {
                        var myobj = eval('(' + data + ')');
                        if(myobj.success)
                        {
                            $("#changePassword").dialog('close');
                            $("#dialog").data('title.dialog', "Change Successful");
                            $("#dialog p").text("Succesfully changed password.");
                            $("#dialog").dialog('open');
                        }else{
                            $("#changePassword ul").append("<li>" + myobj.message + "</li>" );
                        }

                    });
                }else{
                    $("#changePassword input[type=password]").addClass("red");
                    $("#changePassword ul").append("<li>" + "Please enter the same password in both fields" + "</li>" );
                }
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        });
        $("#changePassword").dialog('open');
    }



    $(document).ready(function() {

        $("#birthday").datepicker({
            yearRange: "-100:+0",
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd'
        });

        $("#changePassword").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 300,
            modal: true
        });
        $("#dialog").dialog({
            bgiframe: true,
            modal: true,
            autoOpen: false,
            resizable: false,
            buttons: {
                Ok: function() {
                    $(this).dialog('close');
                    $("#usersTable").trigger("reloadGrid");
                }
            }
        });
        $("#addUserForm").dialog({
            bgiframe: true,
            autoOpen: false,
            height:580,
            modal: true,
            resizable:false,
            zIndex: 1000,
            buttons: {
                'Add  User': function() {
                    var   username = $("#addUserForm #username").attr('value'),
                    firstname = $("#addUserForm #firstname").attr('value'),
                    lastname = $("#addUserForm #lastname").attr('value'),
                    groupid = $("#addUserForm #groupid").attr('value'),
                    gender = $("#male").is(':checked') ? 'm' : 'f',
                    email = $("#addUserForm #email").attr('value'),
                    password = $("#addUserForm #password").attr('value'),
                    password2 = $("#addUserForm #password2").attr('value'),
                    birthday = $("#birthday").attr('value'),
                    bValid = true;

                    $("#addUserForm ul").empty();
                    bValid = bValid && password == password2;

                    if (bValid) {
                        $.post("/user/add-user", {username:username,
                            firstname:firstname,
                            lastname:lastname,
                            groupid:groupid,
                            email:email,
                            gender:gender,
                            password:password,
                            birthday:birthday},
                        function(data){
                            var errors = eval ('(' + data + ')');
                            if (errors.length == 0){
                                $("#addUserForm").dialog('close');
                                $("#dialog").data('title.dialog', "Successfuly added user " );
                                $("#dialog p").text("Succesfully added the user " + username);
                                $("#dialog").dialog('open');
                            }else{
                                $.each(errors, function(){
                                    $("#addUserForm ul").append("<li>" + this + "</li>" );
                                });
                            }

                        })
                    }
                    else{
                        $("#addUserForm input[type=password]").addClass("red");
                        $("#addUserForm ul").append("<li>" + "Please enter the same password in both fields" + "</li>" );
                    }
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            },
            close: function() {
                $("#addUserForm input[type=password]").removeClass("red");
            }
        });

        $('#addUser').click(function() {
            $('#addUserForm').dialog('open');
        }).hover(
        function(){
            $(this).addClass("ui-state-hover");
        },
        function(){
            $(this).removeClass("ui-state-hover");
        }).mousedown(function(){
            $(this).addClass("ui-state-active");
        })
        .mouseup(function(){
            $(this).removeClass("ui-state-active");
        });

        jQuery("#usersTable").jqGrid({
            url:'/user/get-users-list',
            datatype: "json",
            sortable: true,
            colNames:['Id','First Name','Last Name','Username','Birthday','Gender','E-mail','MGroupid','Timestamp'],
            colModel:[ {name:'id',index:'id', width:55},
                {name:'firstname',index:'first_name',width:150,editable:true,editrules:{custom:true, custom_func:checkName}},
                {name:'lastname',index:'last_name', width:70,editable:true,editrules:{custom:true, custom_func:checkName}},
                {name:'username',index:'username', width:150,editable:true,editrules:{custom:true, custom_func:checkName}},
                {name:'birthday',index:'birthday', width:80,editable:true,editrules:{custom:true, custom_func:checkDate}},
                {name:'gender',index:'gender', width:80,editable:true,editrules:{custom:true, custom_func:checkGender}},
                {name:'email',index:'email', width:120,editable:true,editrules:{custom:true, custom_func:checkEmail}},
                {name:'groupid',index:'master_user_group_id',width:80,editable:true,editrules:{custom:true, custom_func:checkGroupId}},
                {name:'timestamp',index:'timestamp', width:160,editable:false}],
            rowNum:20,
            rowList:[10,20,30,40,50],
            imgpath: '/js/jqGrid/themes/<?=$this->jqGridTheme?>/images',
            pager: '#pager2',
            sortname: 'id',
            viewrecords: true,
            sortorder: "asc",
            editurl:'/user/set-users-list',
            caption:"Users List" }).navGrid('#pager2',{add:false,del:false})
                                   .navButtonAdd("#pager2",{
                                     caption:"Set Password",
                                     onClickButton:setPassword,
                                     position:"last",
                                     title:""})
                                   .navButtonAdd('#pager2',{
                                     title:"Add User",
                                     caption:"",
                                     buttonicon:"ui-icon-plus",
                                     onClickButton: addUser,
                                     position:"first"
                                 });

    });
</script>
<div id="dialog" class="dialog" title="">
    <p>
    </p>
</div>

<div id="changePassword" class ="dialog" title="Change Password">
    <form>
        <fieldset>
            <label for="password">Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
            <label for="password2">Confirm Password</label>
            <input type="password" name="password2" id="password2" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
         <ul>
        </ul>
    </form>
</div>

<div id="addUserForm" class ="dialog" title="Add User">
    <form>
        <fieldset>
            <label for="username">Username</label>
            <input type="text" name="username" id="username" value="" class="text ui-widget-content ui-corner-all" />
            <label for="password">Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
            <label for="password2">Confirm Password</label>
            <input type="password" name="password2" id="password2" value="" class="text ui-widget-content ui-corner-all" />
            <label for="firstname">First Name</label>
            <input type="text" name="firstname" id="firstname" value="" class="text ui-widget-content ui-corner-all" />
            <label for="lastname">Last Name</label>
            <input type="text" name="lastname" id="lastname" value="" class="text ui-widget-content ui-corner-all" />
            <label for="gender">Gender</label>
            <input type=radio name="gender" id ="male" value="m" checked />Male
            <input type=radio name="gender" id ="female" value="f" />Female<br><br>
            <label for="birthday">Birthday: </label>
            <input type="text" name ="birthday" id="birthday"> <br><br>
            <label for="email">Email address</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
            <label for="groupid">Group ID</label>
            <input type="text" name="groupid" id="groupid" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
        <ul>
        </ul>
    </form>
</div>

<table id="usersTable" class="scroll"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>
<div id="buttons" style="margin-top:1em">
</div>

